<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>27.CSS 实现卡片轮播</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    section {
      width: 250px;
      height: 350px;
      /* 添加透视效果 */
      perspective: 800px;
    }

    .card-box {
      position: relative;
      width: 100%;
      height: 100%;
      /* 保持3d */
      transform-style: preserve-3d;
      /* 设置偏移 */
      transform: translateZ(-200px) rotateY(0);
      /* 添加动画 */
      animation: rotate 10s infinite cubic-bezier(1, 0.01, 0.3, 1.3) forwards;
    }

    .card-box-item {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      /* 圆角 */
      border-radius: 8px;
      /* 设置背景图片 */
      background: var(--url);
      /* 设置偏移 */
      transform: rotateY(var(--y)) translateZ(200px);
    }

    @keyframes rotate {
      0%,
      20% {
        transform: translateZ(-200px) rotateY(0);
      }

      25%,
      45% {
        transform: translateZ(-200px) rotateY(-120deg);
      }

      50%,
      75% {
        transform: translateZ(-200px) rotateY(-240deg);
      }

      80%,
      100% {
        transform: translateZ(-200px) rotateY(-360deg);
      }
    }
  </style>

  <body>
    <section>
      <div class="card-box">
        <div
          class="card-box-item"
          style="--url: url('/img/jyj1.jpg') no-repeat center/100%; --y: 0deg"
        ></div>
        <div
          class="card-box-item"
          style="--url: url('/img/jyj2.jpg') no-repeat center/100%; --y: 120deg"
        ></div>
        <div
          class="card-box-item"
          style="--url: url('/img/jyj3.jpg') no-repeat center/100%; --y: 240deg"
        ></div>
      </div>
    </section>
  </body>
</html>
